<template>
<div class="classify flex-center">
    <nav class="tabs-page pl6 width-100 height100 bgc-white">
        <div class="tab_stair" v-for="(item, index) in list" :key="index">
            <div class="label pl10 pr2 fz-13" :class="[{ 'active': activeIndex === index }]" @click="activeIndex = index">
                <div class="text-p">{{ item.name }}</div> <van-icon :name=" activeIndex !== index ? 'arrow-down' : 'arrow-up'" class="ml2" />
            </div>
            <ul class="child fz-12" >
                <li v-for="child in item.children" :key="child.id" @click="get_child_goods(child.id)">
                    {{ child.name }}
                </li>
            </ul>
        </div>
    </nav>
    <div class="goods_vessel flex-1">
		
        <div class="goods-item flex-center bgc-white p6 fz-12" v-for="(item, index) in goods_up" :key="index" @click="goods_deail(item.id,item.type)">
            <van-image
                class="width-80 height-90"
                fit="contain"
                :src="item.cover_img"
                lazy-load
            />
            <!-- <img :src="item.cover_img" class="width-80 height-90" style="object-fit: contain;" alt=""> -->
            <div class="msg flex-1 text-left height-90 pl10">
                <p class="ellipsis-2">{{item.name}}</p>
                    <span class="mt4">{{item.brand_name}}</span> 
                <div class="flex-center-space-between mt4 width100">
                    <p class="">库存：{{item.stock}}</p>
                    <div class="flex-1 ml10" v-if="item.city"><van-icon name="location-o" />{{item.city}}</div>
                </div>
                <p><span class="price blod fz-13" v-if="item.price">￥ {{item.price}}</span> <span class="price" v-else>会员认证可见</span> </p>
            </div>
        </div>
		
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            activeIndex: null, // 一级菜单激活的索引
            activeId: null, // 二级菜单激活 唯一标识
            list: [
                {
                    name: '圆柱轴承',
                    children: [
                        { name: '双头轴承', id: 1 },
                        { name: '无油轴承', id: 2 }
                    ]
                },
                {
                    name: '滚针轴承',
                    children: [
                        { name: '无油轴承', id: 3 }
                    ]
                }
            ],
			goods_up:[],
			
        }
    },
	created: function() {
		
		this.getBaseInfo()
		
	},
	methods: {
		getBaseInfo:function(){
			
			const that = this
			this.$home.getHomeData('goods_cate').then(function(res){
				let data = res.data.select_list || {}
				that.list = data
			})
			
			this.$home.getHomeData('goods_up').then(function(res){
				const data = res.data||{}
                // console.log(data)
                data.up_list.forEach(v => {
                    v.cover_img = v.imgurl
                })
				that.goods_up = data.up_list||[]
			})
		
		},
		
		get_child_goods:function(id){
			const that = this
			var param = {
				ct_id:id
			}
			this.$goods.getGoodsScreenList(param).then(function(res){
				const data = res.data||{}
				that.goods_up = data.list||[]
			})
		},
		
		goods_deail:function(id,type){
			this.$router.push({
				path: '/product',    
				query:{    
					id:id,
					type:type
								
				}
			
			})
		},
		
		
	}
	
}
</script>

<style lang="less" scoped>
.tabs-page, .goods_vessel {
    max-height: 100%;
    overflow-y: auto;
    // width: 100%;
}
.goods_vessel {
    background-color: #fcf9fc;
    height: 100%;
}

.tab_stair {
    text-align: left;
    .label {
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 13px;
        padding-top: 8px;
        padding-bottom: 8px;
        .text-p {
            flex: 1;
        }
    }
    .child {
        height: 0;
        background-color: #F6F6F6;
        overflow: hidden;
        li {
            min-height: 36px;
            padding-top: 6px;
            padding-bottom: 6px;
            display: flex;
            align-items: center;
            padding-left: 12px;
            &:active {
                background-color: #eaeaea;
            }
        }
    }
    .active {
        position: relative;
        color: #000;
        font-weight: bold;
        &::before {
            content: "";
            display: inline-block;
            height: 13px;
            width: 3px;
            background-color: @priceColor;
            position: absolute;
            left: 0;
        }
        & + .child {
            height: max-content;
        }
    }
}

// 商品
.goods_vessel {
    padding: 5px 10px 10px 5px;
}
</style>
